<template>
  <div class="body">
    <el-form
      :inline="true"
      :model="formInline"
      label-position="right"
      label-width="100px"
      style="
        margin-top: 20px;
        border: 1px solid #ccc;
        padding: 0.5%;
        text-align: left;
        width: 96%;
        border-radius: 8px;
      "
    >
      <span><i class="el-icon-search"></i> 筛选搜索：</span>
      <el-row>
        <el-form-item label="输入搜索:">
          <el-input v-model="formInline.user" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品货号:">
          <el-input v-model="formInline.user" placeholder="商品货号"></el-input>
        </el-form-item>
        <el-form-item label="商品分类:">
          <el-select v-model="formInline.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品品牌:">
          <el-select v-model="formInline.region" placeholder="请选择">
            <el-option label="区一" value="shanghai"></el-option>
            <el-option label="区二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-row>

      <el-form-item label="上架状态:">
        <el-select v-model="formInline.region" placeholder="请选择">
          <el-option label="上架" value="shanghai"></el-option>
          <el-option label="下架" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态:">
        <el-select v-model="formInline.region" placeholder="请选择">
          <el-option label="审核通过" value="shanghai"></el-option>
          <el-option label="未审核" value="beijing"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button>重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getGoodsList">查询结果</el-button>
      </el-form-item>
    </el-form>
    <div
      style="
        width: 96%;
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        border: 1px solid #ccc;
        padding: 0.5%;
        border-radius: 8px;
        align-items: center;
      "
    >
      <div style="flex: 1; text-align: left; font-size: 17px">
        <i class="el-icon-document"></i> 数据列表
      </div>
      <el-button type="primary">商品添加</el-button>
    </div>

    <el-table 
      :data="tableData" 
      border 
      height="600" 
      style="width: 97%; margin-top: 20px;"
      class="table-container">
      <el-table-column type="selection" align="center" width="57">
      </el-table-column>
      <el-table-column prop="code" label="编号" align="center" width="100">
      </el-table-column>
      <el-table-column
        prop="name"
        label="商品图片"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <img style="width: 80px; height: 80px; object-fit: cover;" :src="scope.row.image"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="商品名称"
        align="center"
        width="380"
      >
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格/货号"
        align="center"
        width="130"
      >
      </el-table-column>
      <el-table-column prop="brand_id" label="标签" align="center" width="130">
      </el-table-column>
      <el-table-column prop="category_id" label="排序" align="center" width="130">
      </el-table-column>
      <el-table-column
        prop="stock"
        label="SKU库存"
        align="center"
        width="130"
      >
      </el-table-column>
      <el-table-column prop="stock" label="销量" align="center" width="130">
      </el-table-column>
      <el-table-column
        prop="status"
        label="审核状态"
        align="center"
        width="140"
      >
      </el-table-column>
      <el-table-column prop="created_at" label="操作" align="center" width="160">
      </el-table-column>
    </el-table>
    <el-pagination
      style="width: 36%;"
      :page-size="20"
      :pager-count="11"
      layout="prev, pager, next"
      :total="1000">
    </el-pagination>
    <!-- <ul>
          <li v-for="user in users" :key="user.id">
            {{ user.username }}============> ({{ user.email }})
            <input type="checkbox" :id="user.id" :value="user.id" v-model="selected">
          </li>
      </ul>
      <form @submit.prevent="addUser">
          <input v-model="name" placeholder="姓名" />
          <input v-model="email" placeholder="邮箱" />
          <button type="submit">添加用户</button>
      </form>
      <br/>
      <button @click="deleteSelected">勾选进行删除</button>
      <button @click="exitLogin">退出登录</button> -->
  </div>
</template>
 <script>
import { fetchUsers, createUser, deleteeUsers } from "@/api/user";
import { getGoodsList } from "@/api/goods";
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      users: [],
      name: "",
      email: "",
      selected: [],
      tableData: [
      ],
    };
  },
  async created() {
    // 获取用户列表
    this.users = await fetchUsers(
      JSON.parse(localStorage.getItem("loginStorage"))
    );
    this.getGoodsList();
    
    // 监听商品列表刷新事件
    this.$bus.$on('refreshGoodsList', () => {
      this.getGoodsList();
    });
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听
    this.$bus.$off('refreshGoodsList');
  },
  methods: {
    async getGoodsList() {
      let page = 1;
      let limit = 5;
      const res = await getGoodsList({ page, limit });
      this.tableData = res.data;
      console.log(res);
    },
    exitLogin() {
      localStorage.clear();
      this.$router.replace({ name: "loginPager" });
    },
    async deleteSelected() {
      await deleteeUsers({ ids: this.selected });

      this.users = await fetchUsers(
        JSON.parse(localStorage.getItem("loginStorage"))
      ); //查询数据库
    },
    async addUser() {
      if (this.name == "" || this.email == "") {
        alert("请输入对应数据");
        return;
      }
      const newUser = await createUser({
        username: this.name,
        email: this.email,
      });
      this.users.push(newUser); //返回成功加入 更新列表
      // this.users = await fetchUsers();//查询数据库
      this.name = "";
      this.email = "";
    },
  },
};
</script>

 
<style scoped>
  .body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    align-items: center;
  }
  .table-container {
    overflow: hidden;
  }
  .table-container .el-table__body-wrapper {
    overflow-y: auto;
  }
  .el-table .cell {
    padding: 8px 0;
  }
</style>